<template>
<!-- 轮播图 -->
<div class='show'>
  <mt-swipe :auto="4000">
  <mt-swipe-item><img src="https://q-extra.paixin.com/admin/1612684226686.png?imageView2/2/format/webp" alt=""></mt-swipe-item>
  <mt-swipe-item><img src="https://d303.paixin.com/thumbs/5389310/384547242/staff_1024.jpg?imageView2/2/format/webp" alt=""></mt-swipe-item>
  <mt-swipe-item><img src="https://d301.paixin.com/thumbs/29609120/421522718/staff_1024.jpg?imageView2/2/format/webp" alt=""></mt-swipe-item>
</mt-swipe>
<!-- 图片 -->
<div class="show_img"><img src="https://q-extra.paixin.com/admin/1612684226686.png?imageView2/2/format/webp" alt=""></div>
<!-- 标题 -->
<div class="show_tittle"><h1>精&nbsp;选&nbsp;演&nbsp;出</h1></div>
<!-- 点击图片跳转到详情页界面 -->
<router-link to="/detail" tag="div" class="show_detail"><img src="https://d303.paixin.com/thumbs/5389310/384547242/staff_1024.jpg?imageView2/2/format/webp" alt=""></router-link>
<router-view></router-view>
</div>

</template>

<script>
export default {
data() {
return {

};
},
computed: {},
watch: {},
methods: {

},
created() {

},
mounted() {

},
beforeCreate() {}, 
beforeMount() {}, 
beforeUpdate() {},
updated() {}, 
beforeDestroy() {}, 
destroyed() {},
activated() {}, 
}
</script>
<style lang='scss' scoped>
.show{
  position:relative;
  top: 60px;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .mint-swipe{
     margin: 10px auto;
    height: 150px;
     width: 90%;
    img{
      display: block;
 width: 100%;
    } 
  }
   .show_img{
     margin: 10px auto;
    width: 90%;
      height: 50px;
      img{
          display: block;
          height: 50px;
      width: 100%;
      }
    }
    .show_tittle{
     margin: 20px 20px;
     h1{
       font-size: 1.4rem;
       font-weight: 500px;
     }

    }
    .show_detail{
      margin: 10px 20px;
      width: 100px;
      // height: 100px;
      img{
        width: 100%;
        height: 150px;
      }
    }
   
}
</style>